<template>
	<view class="content">
		<view class="content-info">
			<view class="con-info-1">
				<view class="view-1">水电余额</view>
				<view class="view-2">￥{{cardInfo.balance}}</view>
			</view>
			<view class="con-info-2"  @click="goTo(`/pages/personal/recharge/recharge?custId=${cardInfo.custId}&custType=${cardInfo.custType}`)">
				<view class="view-3">去充值</view>
				<uni-icons class="icon" type="forward" size="18" color="#6A6A6A"></uni-icons>
			</view>
		</view>
		<view v-if="data.detail&&data.detail.length > 0" class="row-col" v-for="(item, index) in data.detail" :key="index">
			<view class="topBox">
				<view class="name">{{item.roomName}}</view>
				<view class="mess row">
					<view class="num fill">当前读数：<span class="color-red">{{item.currentReading}}</span></view>
				</view>
				<view class="time">更新时间：{{timestamp(item.reportTime,true)}}</view>
			</view>
<!-- 			<view>
				<uni-list>
					<uni-list-item title="用电明细" link @click="goDetail(item.deviceNo, item.roomName)"></uni-list-item>
				</uni-list>
			</view> -->
			<view class="con-detail" @click="goDetail(item.deviceNo, item.roomName)">
				<view class="view">用电明细</view>
				<image :src="$imgUrl + '/personal/go-detail-icon.png'" class="con-photo" mode=""></image>
			</view>
		</view>
		<view v-else>
			<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow } from "@dcloudio/uni-app"
	import { getAmmeters } from '@/common/API/ammeters'
	import { reactive,ref } from 'vue'
	import dayjs from "dayjs"
	import { getFinanceAccount } from '@/common/API/bills'

	const cardInfo = ref({})
	//处理时间戳
	const timestamp = (val : any, s) => {
		return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	}
	const data = reactive({
		detail: {}
	})
	const getList = async () => {
		let res = await getAmmeters()
		data.detail = res
		console.log(res)
	}
	const goDetail = (no,name) => {
		console.log(no)
		uni.navigateTo({
			url: `/pages/personal/ammeters/ammetersDetail?no=${no}&name=${name}`
		})
	}
	onShow(() => {
		getList()
		getBalanceInfo()
	})
	const goTo = (url:any)=>{
		uni.navigateTo({
			url: url
		})
	}
	// 获取卡包信息
	const getBalanceInfo = async ()=>{
		cardInfo.value = await getFinanceAccount({});
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 16rpx 0 20rpx 0;
		.content-info{
			background: #fff;
			border-radius: 16rpx;
			margin: 32rpx;
			padding: 16rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.con-info-1{
				.view-1{
					font-size: 24rpx;
				}
				.view-2{
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			.con-info-2{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				.view-3{
					margin-right: 16rpx;
				}
			}
		}
		.row-col{
			margin: 16rpx 32rpx 20rpx 32rpx;
			border-radius: 8rpx;
			overflow: hidden;
		}
		.topBox {
			background: #fff;
			padding: 0 32rpx 20rpx;
			.name {
				padding: 34rpx 0 6rpx;
				line-height: 60rpx;
				font-size: 32rpx;
				font-weight: bold;
				.label {
					background: $uni-color-error;
					color: #fff;
					font-size: 28rpx;
					height: 42rpx;
					line-height: 42rpx;
					padding: 0 14rpx;
					margin-left: 30rpx;
					position: relative;
					&::before {
						content: '';
						display: inline-block;
						width: 0;
						height: 0;
						border: 10rpx solid transparent;
						border-left: none;
						border-right-color: $uni-color-error;
						position: absolute;
						top: 4rpx;
						left: -10rpx;
					}
				}
			}
			.mess {
				.num {
					line-height: 48rpx;
				}
			}
			.time {
				line-height: 48rpx;
			}
		}
		.main{
			background: #fff;
			padding: 0 32rpx 20rpx;
		}
		.color-red{
			color: rgba(249, 55, 75, 1);
		}
		.con-detail{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 32rpx 38rpx 32rpx;
			background: #fff;
			position: relative;
			&::before{
				content: " ";
				position: absolute;
				left: 32rpx;
				top: 0;
				width: 626rpx;
				height: 2rpx;
				border-top: 2rpx solid rgba(234, 234, 233, 1);
			}
			.view{
				color: rgba(253, 150, 24, 1);
			}
			.con-photo{
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
</style>